/*
 * @Author: 韩旭
 * @Date: 2021-08-24 18:02:35
 * @LastEditTime: 2021-08-25 09:20:09
 * @LastEditors: 韩旭
 * @Description:
 *      <div v-backtop:app="400"> 回到顶部 </div>
 * @FilePath: \tvmscanner-front\plugins\directive\backtop.JS
 */
export default {
    bind(el, binding, vnode) {
        // 响应点击后滚动到元素顶部
        el.addEventListener('click', () => {
            const target:any = binding.arg
                ? document.getElementById(binding.arg)
                : window
            target.scrollTo({
                top: 0,
                behavior: 'smooth',
            })
        })
    },
    update(el, binding, vnode) {
        // 滚动到达参数值才出现绑定指令的元素
        const target:any = binding.arg
            ? document.getElementById(binding.arg)
            : window
        if (binding.value) {
            target.addEventListener('scroll', (e) => {
                if (e.srcElement.scrollTop > binding.value) {
                    el.style.visibility = 'unset'
                } else {
                    el.style.visibility = 'hidden'
                }
            })
        }
        // 判断初始化状态
        if (target.scrollTop < binding.value) {
            el.style.visibility = 'hidden'
        }
    },
    unbind(el, binding, vnode) {
        const target:any = binding.arg
            ? document.getElementById(binding.arg)
            : window
        target.removeEventListener('scroll')
        el.removeEventListener('click')
    },
}

